<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '0px',
    }"
  >
    <div class="wrap-other-roll">
      <div class="card">
        <div class="title">
          服务专区
          <el-button
            style="float: right; padding: 0"
            type="text"
            @click="addService"
            >添加服务</el-button
          >
        </div>
        <div class="service" v-for="(item, index) in serviceItem" :key="index">
          <el-card shadow="always">
            <div class="service-remove">
              <el-button
                type="danger"
                size="mini"
                v-if="index != 0"
                @click="removeService(item)"
                >删除</el-button
              >
            </div>
            <div class="service-img">
              <web-upload
                @upload="(e) => upload(e, item)"
                :size="imgSize[index % imgSize.length]"
                accept="image/*"
              />
              <img :src="item.img" />
            </div>
            <div class="service-input">
              <el-input
                type="text"
                placeholder="请输入服务名称"
                v-model="item.name"
                clearable
                maxlength="10"
              >
              </el-input>
            </div>
            <div class="service-input">
              <el-input
                type="text"
                placeholder="请输入服务链接"
                v-model="item.url"
                clearable
                maxlength="100"
              >
              </el-input>
            </div>
          </el-card>
        </div>
      </div>
      <div class="card">
        <div class="title">
          子应用
          <el-button
            style="float: right; padding: 0"
            type="text"
            @click="addApp"
            >添加应用</el-button
          >
        </div>
        <div class="service" v-for="(item, index) in appItem" :key="index">
          <el-card shadow="always">
            <div class="service-remove">
              <el-button
                type="danger"
                size="mini"
                v-if="index != 0"
                @click="removeApp(item)"
                >删除</el-button
              >
            </div>
            <div class="service-img">
              <web-upload
                @upload="(e) => upload(e, item)"
                :size="[100, 100]"
                accept="image/*"
              />
              <img :src="item.img" />
            </div>
            <div class="service-input">
              <el-input
                type="text"
                placeholder="请输入应用名称"
                v-model="item.name"
                clearable
                maxlength="4"
              >
              </el-input>
            </div>
            <div class="service-input">
              <el-input
                type="text"
                placeholder="请输入应用链接"
                v-model="item.url"
                clearable
                maxlength="100"
              >
              </el-input>
            </div>
          </el-card>
        </div>
      </div>
      <div style="text-align: center; padding-bottom: 20px">
        <span
          class="wrap-btn wrap-success"
          v-if="$checkPermission(101)"
          @click="save"
          >保存</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSize: [
        [370, 480],
        [575, 235],
        [275, 220],
        [275, 220],
      ],
      serviceItem: [
        {
          name: '',
          img: '',
          url: '',
        },
      ],
      appItem: [
        {
          name: '',
          img: '',
          url: '',
        },
      ],
    }
  },
  created() {
    this.itemList()
  },
  methods: {
    itemList() {
      // 获取详情
      this.$axios.get('/admin/mobile/findApp').then((data) => {
        this.serviceItem = [
          {
            name: '',
            img: '',
            url: '',
          },
        ]
        this.appItem = [
          {
            name: '',
            img: '',
            url: '',
          },
        ]
        if (data.code == 200) {
          if (data.data) {
            this.serviceItem = data.data.serviceItem
            this.appItem = data.data.appItem
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    addService() {
      //添加服务
      this.serviceItem.push({
        img: '',
        name: '',
        url: '',
      })
    },
    removeService(item) {
      const index = this.serviceItem.indexOf(item)
      //删除服务
      if (index !== -1) {
        this.serviceItem.splice(index, 1)
      }
    },
    addApp() {
      //添加应用
      this.appItem.push({
        img: '',
        name: '',
        url: '',
      })
    },
    removeApp(item) {
      const index = this.appItem.indexOf(item)
      //删除应用
      if (index !== -1) {
        this.appItem.splice(index, 1)
      }
    },
    upload(data, item) {
      //上传服务图片
      item.img = data.fileDomain + data.url
    },
    cover(data, item) {
      //上传封面图片
      this[item].extParams = data.fileDomain + data.url
    },
    save() {
      //保存
      const arr = [],
        arrs = []
      this.serviceItem.forEach((element) => {
        if (element.img == '') {
          arr.push('请上传服务图片')
        }
        if (element.name == '') {
          arr.push('请输入服务名称')
        }
        if (element.url == '') {
          arr.push('请输入服务链接')
        }
      })
      this.appItem.forEach((element) => {
        if (element.img == '') {
          arrs.push('请上传应用图片')
        }
        if (element.name == '') {
          arrs.push('请输入应用名称')
        }
        if (element.url == '') {
          arrs.push('请输入应用链接')
        }
      })
      if (arr.length > 0) {
        this.$message.error(arr[0])
        return
      }
      if (arrs.length > 0) {
        this.$message.error(arrs[0])
        return
      }
      this.$axios
        .post('/admin/mobile/addApp', {
          serviceItem: this.serviceItem,
          appItem: this.appItem,
        })
        .then((data) => {
          if (data.code == 200) {
            this.$message.success('操作成功！')
            this.itemList()
          } else {
            this.$message.error(data.msg)
          }
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
  }
  .el-card {
    margin-top: 20px;
  }
  .service {
    width: 490px;
    display: inline-block;
    margin-right: 20px;
    position: relative;
    &-remove {
      position: absolute;
      top: 40px;
      right: 20px;
      z-index: 1999;
    }
    &-img {
      position: relative;
      img {
        display: block;
        position: absolute;
        top: 0;
        left: 100px;
        max-height: 82px;
        max-width: 345px;
      }
    }
    &-input {
      .el-input {
        width: 100%;
        margin: 10px 10px 0 0;
      }
    }
  }
  .cover-img {
    display: block;
    position: absolute;
    top: 0;
    left: 100px;
    max-height: 82px;
  }
  .more {
    margin-top: 20px;
  }
}
</style>
